import './Invalid.css';
import { Table} from 'antd';
import { useEffect, useState } from 'react';
import http from '../../../utils/http';
function Invalid() {
    const [data,setData]=useState()
    const [user,setUser]=useState()
    useEffect(() => {
        endOrder()
    }, [])
    const endOrder=()=>{
        http({
            url:'/panchen/getEndOrder',
            method:'get',
            data:{
                id:sessionStorage.getItem('orderid')
            }
        }).then(res=>{
            console.log(res.data);
            setUser(res.data)
            setData(res.data.goodsArr)
        })
    }

    let imgStyle={
        width:100,
        height:100
    }
    let textStyle={
        color:'red',
        fontSize:15
    }
    const columns = [
        {
            title: '商品信息',
            dataIndex: 'imgurl',
            key: 'imgurl',
            render:img=>{
                return(
                    <div>
                        <img style={imgStyle} src={img} alt=""/>
                    </div>
                )
            }
        },
        {
            title: '商品描述',
            dataIndex: 'information',
            key: 'information',
            width: 250,
            ellipsis:true
        },
        // {
        //     title: '规格',
        //     dataIndex: 'specifications',
        //     key: 'specifications',
        // },
        {
            title: '单价',
            dataIndex: 'sellPrice',
            key: 'sellPrice',
        },
        {
            title: '数量',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '结算',
            dataIndex: 'type',
            key: 'type',
        },
        // {
        //     title: '实付款',
        //     dataIndex: 'payment',
        //     key: 'payment',
        //     render:text=>{
        //         return(
        //             <div>
        //                 <span style={textStyle}>{text}</span>
        //             </div>
        //         )
        //     }
        // },

    ];

    // const data = [
    //     {
    //         key: '1',
    //         imgurl:'https://img0.baidu.com/it/u=1669153754,1459411042&fm=26&fmt=auto&gp=0.jpg',
    //         information: '1212211',
    //         // specifications: '蓝色',
    //         sellPrice: "￥" + '20.20',
    //         num: '1' + "件",
    //         state: '待付款',
    //         type: '未结算',
    //         // payment: "￥" + 12,
    //     }
    // ];
    return (
        <div>
            <div>订单失效</div>
            <div className='d-f shang p-3 x-s-b mt-3'>
                <div className='d-f'>
                    <div>
                        <div>订单编号：</div>
                        <div>微信昵称：</div>
                        <div>收件人：</div>
                        <div>联系号码：</div>
                        <div>收件地址：</div>
                    </div>
                    <div>
                        <div>{user!=undefined?user.id:''}</div>
                        <div>{user!=undefined?user.name:''}</div>
                        <div>{user!=undefined?user.userName:''}</div>
                        <div>{user!=undefined?user.tel:''}</div>
                        <div>{user!=undefined?user.orderAddress:''}</div>
                    </div>
                </div>
                <div className='d-f'>
                    <div>订单状态：</div>
                    <div style={textStyle}>已失效(未结算)</div>
                </div>
            </div>
            <div className='mt-3'>
                <Table columns={columns} dataSource={data} pagination={false}/>
            </div>
        </div>
    )
}
export default Invalid